#{extends 'main.html' /}

<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/category.css'}">

<div id="categorybarContainer">
<div id="navMenuCategory">
        <ul>
          <li><a href="/"><span>Recently Added</span></a></li> 
          <li><a href=""><span>Highest Rated</span></a></li>
          <li><a href=""><span>Alphabetical</span></a></li>
        </ul>
      </div>
</div>
	<div id="categtextCont">
		<div id="categIcon">
		<img  height="150px" width="150px" src= "public/images/categoryimages/Animation-icon.png"></img>
		</div>
		<div id="categText">
		<h2>ANIMATION MOVIES</h2>
		
		</div>
	</div>
	
<div id="moviesContainer">
	<div id="movie1cont">
		<div id="movie1">
			<div id="Text-RateCont">
				
				<div id="Rate"><img height="30px" width="30px" src= "public/images/categoryimages/star-icon.png"></img></div>
				
			</div>
			<div id="img">
			<img height="130px" width="150px" src="public/images/categoryimages/image5.jpg"></img>
			</div>
			<div id="Text">text</div>
		</div>
	</div>
	
	
	<div id="movie2cont">
		<div id="movie2">
			<div id="Text-RateCont">
				
				<div id="Rate"><img height="30px" width="30px" src= "public/images/categoryimages/star-icon.png"></img></div>
			</div>
			<div id="img">
			<img height="130px" width="150px"  src= "public/images/categoryimages/image6.jpg"></img>
		</div>
		<div id="Text">text</div>
		</div>
	</div>
	
	
	<div id="movie3cont">
		<div id="movie3">
			<div id="Text-RateCont">
				
				<div id="Rate"><img height="30px" width="30px" src= "public/images/categoryimages/star-icon.png"></img></div>
			</div>
			<div id="img">
			<img height="130px" width="150px" src="public/images/categoryimages/image7.jpg" ></img>
		</div>
		<div id="Text">text</div>
		</div>
	</div>
	
	
	<div id="movie4cont">
		<div id="movie4">
			<div id="Text-RateCont">
				
				<div id="Rate"><img height="30px" width="30px" src= "public/images/categoryimages/star-icon.png"></img></div>
			</div>
			<div id="img">
			<img height="130px" width="150px"  src= "public/images/categoryimages/image8.jpg"></img>
			</div>
			<div id="Text">text</div>
		</div>
	</div>
	
	
	<div id="movie5cont">
		<div id="movie5">
			<div id="Text-RateCont">
				
				<div id="Rate"><img height="30px" width="30px" src= "public/images/categoryimages/star-icon.png"></img></div>
			</div>
			<div id="img">
			<img height="130px" width="150px" src= "public/images/categoryimages/image9.jpg"></img>
			</div>
			<div id="Text">text</div>
		</div>
	</div>
	
	
	<div id="movie6cont">
			<div id="movie6">
			<div id="Text-RateCont">
				
				<div id="Rate">
				<img height="30px" width="30px" src= "public/images/categoryimages/star-icon.png"></img>
			</div></div>
			<div id="img">
			<img height="130px" width="150px" src= "public/images/categoryimages/image20.jpg"></img>
			</div>
			<div id="Text">text</div>
			</div>
	</div>

</div>
<div id="biriki" >
	<div id="navMenuBiriki">
        <ul>
          <li><a href=""><span>1</span></a></li> 
          <li><a href=""><span>2</span></a></li>
          <li><a href=""><span>3</span></a></li>
         
        </ul>
      </div>
	</div>

